<template>
  <el-aside class="aside"
            :width="isCollapse?'64px':'200px'">
    <div class="btn-collapse"
         @click="changeCollapse">
      <i :class="isCollapse ? 'el-icon-open':'el-icon-turn-off'"></i>
    </div>
    <el-menu :default-active="activeIndex"
             unique-opened
             :collapse="isCollapse"
             :collapse-transition="false"
             router>
      <el-submenu :index="item.id.toString()"
                  v-for="item in menuList"
                  :key="item.id">
        <template slot="title">
          <i :class="iconList[item.path]"></i>
          <span>{{item.authName}}</span>
        </template>
        <el-menu-item :index="'/'+subitem.path"
                      v-for="subitem in item.children"
                      :key="subitem.id">
          <i class="el-icon-menu"></i>
          <span>{{subitem.authName}}</span>
        </el-menu-item>
      </el-submenu>

    </el-menu>
  </el-aside>
</template>

<script>
import { getMenus } from '@/api/user.js'
export default {
  data () {
    return {
      isCollapse: false,
      menuList: [],
      iconList: {},
      activeIndex: '',
      show: false
    }
  },

  created () {
    this.getMenu()
    this.activeIndex = this.$route.path
  },

  methods: {
    // 获取左侧导航内容
    async getMenu () {
      const { data: res } = await getMenus()
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.menuList = res.data
      res.data.forEach(element => {
        switch (element.path) {
          case 'goods':
            this.iconList.goods = 'el-icon-shopping-bag-2'
            break
          case 'orders':
            this.iconList.orders = 'el-icon-s-order'
            break
          case 'rights':
            this.iconList.rights = 'el-icon-key'
            break
          case 'users':
            this.iconList.users = 'el-icon-user'
            break
          case 'reports':
            this.iconList.reports = 'el-icon-data-line'
            break
        }
      })
    },
    // 收缩状态下点击图标打开
    changeCollapse () {
      this.isCollapse = !this.isCollapse
      // 传值给父组件，告知状态
      this.$emit('func', this.isCollapse)
    }
  }
}
</script>

<style scoped lang='less'>
.aside:not(.el-menu--collapse) {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  margin-right: 10px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 8px 0px rgba(63, 32, 135, 0.08);
  border-radius: 0px 4px 0px 0px;
  overflow: hidden;

  .el-menu {
    border-right: none;
    width: 100%;
    height: 100%;
  }

  .btn-collapse {
    width: 100%;
    background-color: #0e8bff;
    text-align: center;
    i {
      padding: 10px 0;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      user-select: none;
      // transform: translateX(-50%);
    }
  }
}
</style>
